import React, { Component } from 'react';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import {connect } from 'dva';
import { routerRedux } from 'dva/router';
import constants from '../../../common/constants';

import {
    Tooltip,
    Row,
    Col,
    Card,
    Form,
    Input,
    Select,
    Button,
    Modal,
    message,
    Icon,
    Table,
    Tabs,
    Badge
} from 'antd';
const { TabPane } = Tabs;
const FormItem = Form.Item;
@connect((state)=>({
    goodsManage:state.goodsManage,
}))
@Form.create()
export default class GoodsDetails extends Component{
    state={
        goodsManage:[],
        goods_id:'',
        allComments:'',
        goodComments:'',
        midComments:'',
        netiveComments:''
    }

    componentDidMount() {
        const step = this.props;
        const {dispatch}= this.props;
        const goods_id = step.goodsManage.step.goods_id;
        this.state.goods_id = goods_id;
        dispatch({
            type: 'goodsManage/singleGoods',
            payload: {goods_id: goods_id},
            callback: (response) => {
                if (response.result === 0) {
                    const comments=response.resultData.goodsManage.list;
                    this.setState({
                        goodsManage: comments,
                        allComments:comments.length==0?0:response.resultData.goodsManage.list[0].allComments,
                        goodComments: comments.length==0?0:response.resultData.goodsManage.list[0].goodComments,
                        midComments: comments.length==0?0:response.resultData.goodsManage.list[0].midComments,
                        netiveComments:comments.length==0?0:response.resultData.goodsManage.list[0].nativeComments,

                    })
                }
            }
        })
    }

    handleTabChange = (key) => {
        const params = {};
        const {dispatch}= this.props;

        if (key == 'singleGoods') {
            params["goods_id"]=this.state.goods_id;
            dispatch({
                type: 'goodsManage/singleGoods',
                payload:params,
                callback: (response) => {
                    if (response.result === 0) {
                        console.log(response);
                        this.setState({
                            goodsManage: response.resultData.goodsManage.list,
                        })
                    }
                }
            })
        }

        if (key === 'goodComments') {
            this.setState({
                goodsManage: [],
            })
            params["goods_id"]=this.state.goods_id;
            params["oga_goods"]=3;
            dispatch({
                type: 'goodsManage/goodComments',
                payload:params,
                callback: (response) => {
                    if (response.result === 0) {
                        console.log(response);
                        this.setState({
                            goodsManage: response.resultData.goodsManage.list,
                        })
                    }else {
                        console.log('--------');
                    }
                }
            })
        }
        if (key === 'midComments') {
            this.setState({
                goodsManage: [],
            })
            params["goods_id"]=this.state.goods_id;
            params["oga_goods"]=3;
            dispatch({
                type: 'goodsManage/midComments',
                payload:params,
                callback: (response) => {
                    if (response.result === 0) {
                        console.log(response);
                        this.setState({
                            goodsManage: response.resultData.goodsManage.list,
                        })
                    }
                }
            })
        }
        if (key === 'negativeComments') {
            this.setState({
                goodsManage: [],
            })
            params["goods_id"]=this.state.goods_id;
            params["oga_goods"]=3;
            dispatch({
                type: 'goodsManage/negativeComments',
                payload:params,
                callback: (response) => {
                    if (response.result === 0) {
                        console.log(response);
                        this.setState({
                            goodsManage: response.resultData.goodsManage.list,
                        })
                    }
                }
            })
        }
    }


    render() {
        const data = this.props;
        console.log(this.state.goodsManage);
        var list = (length) => {
            var res = [];
            for(var i = 0; i < length; i++) {
                res.push(<Icon type="star-o" style={{color: '#FFFF00'}}/>);
            }
            return res
        }




        return(
            <PageHeaderLayout title="商品详情">
                <Card bordered={false} bodyStyle={{overflow:'auto',height:'60%',marginTop:'10px'}}>

                    <Tabs defaultActiveKey="singleGoods" onChange={this.handleTabChange}>
                        <TabPane tab={<span>全部<Badge count={this.state.allComments} showZero={true}/></span>} key="singleGoods">
                            {this.state.goodsManage.length===0||this.state.goodsManage.map(function (name) {
                                // const oga_goods = name.oga_goods;
                                return (

                                    <div style={{marginBottom:'10px'}}>
                                        <Row>
                                            <Col span={4}><img style={{marginLeft:'20px',width:'40px'}} src={name.user_picture}/> &nbsp;<font style={{color:'red'}}>{name.user_name}</font></Col>
                                            <Col span={20}>
                                                {list(name.oga_goods)}<br/>
                                                {name.oga_text}
                                            </Col>
                                        </Row>
                                        <div style={{width:'100%',border:'1px solid #FFFAF0',marginTop:'10px'}}></div>
                                    </div>
                                )
                            })}
                            {this.state.goodsManage.length!==0||<div style={{textAlign:'center',color:'red',fontSize:'20px'}}>当前商品还没有任何评价哦！</div>}
                        </TabPane>
                        <TabPane tab={<span>好评<Badge count={this.state.goodComments} showZero={true}/></span>} key="goodComments">
                            {this.state.goodsManage.length===0||this.state.goodsManage.map(function (name) {
                                // const oga_goods = name.oga_goods;
                                return (

                                    <div style={{marginBottom:'10px'}}>
                                        <Row>
                                            <Col span={4}><img style={{marginLeft:'20px',width:'40px'}} src={name.user_picture}/> &nbsp;{name.user_name}</Col>
                                            <Col span={20}>
                                                {list(name.oga_goods)}<br/>
                                                {name.oga_text}
                                            </Col>
                                        </Row>
                                        <div style={{width:'100%',border:'1px solid #FFFAF0',marginTop:'10px'}}></div>
                                    </div>
                                )
                            })}
                            {this.state.goodsManage.length!==0||<div style={{textAlign:'center',color:'red',fontSize:'20px'}}>当前商品还没有任何好评哦！</div>}

                        </TabPane>
                        <TabPane tab={<span>中评<Badge count={this.state.midComments} showZero={true}/></span>} key="midComments">
                            {this.state.goodsManage.length===0||this.state.goodsManage.map(function (name) {
                                // const oga_goods = name.oga_goods;
                                return (

                                    <div style={{marginBottom:'10px'}}>
                                        <Row>
                                            <Col span={4}><img style={{marginLeft:'20px',width:'40px'}} src={name.user_picture}/> &nbsp;{name.user_name}</Col>
                                            <Col span={20}>
                                                {list(name.oga_goods)}<br/>
                                                {name.oga_text}
                                            </Col>
                                        </Row>
                                        <div style={{width:'100%',border:'1px solid #FFFAF0',marginTop:'10px'}}></div>
                                    </div>
                                )
                            })}
                            {this.state.goodsManage.length!==0||<div style={{textAlign:'center',color:'red',fontSize:'20px'}}>当前商品还没有任何中评哦！</div>}

                        </TabPane>
                        <TabPane tab={<span>差评<Badge count={this.state.netiveComments} showZero={true}/></span>} key="negativeComments">
                            {this.state.goodsManage.length===0||this.state.goodsManage.map(function (name) {
                                // const oga_goods = name.oga_goods;
                                return (

                                    <div style={{marginBottom:'10px'}}>
                                        <Row>
                                            <Col span={4}><img style={{marginLeft:'20px',width:'40px'}} src={name.user_picture}/> &nbsp;{name.user_name}</Col>
                                            <Col span={20}>
                                                {list(name.oga_goods)}<br/>
                                                {name.oga_text}
                                            </Col>
                                        </Row>
                                        <div style={{width:'100%',border:'1px solid #FFFAF0',marginTop:'10px'}}></div>
                                    </div>
                                )
                            })}

                            {this.state.goodsManage.length!==0||<div style={{textAlign:'center',color:'red',fontSize:'20px'}}>当前商品还没有任何差评哦！</div>}

                        </TabPane>
                    </Tabs>



                </Card>
            </PageHeaderLayout>
        )
    }




}